<template>
    <div class="service">
        <van-panel title="我的服务">
            <van-row>
                <van-col span="5">
                    <div v-on:click="showLocation">
                        <van-icon name="location-o" color="#684dd6" />
                        <span>地址</span>
                    </div>
                </van-col>
                <van-col span="5" offset="1">
                    <div v-on:click="sets=true">
                        <van-icon name="setting-o" color="#684dd6" />
                        <span>设置</span>
                    </div>
                </van-col>
            </van-row>
        </van-panel>
        <van-popup v-model="location" position="right" class="v-full" :overlay="false">
            <Location ref="location" :popup="true" :callback="closeLocation"></Location>
        </van-popup>
        <van-popup v-model="sets" position="right" class="v-full" :overlay="false">
            <Sets ref="sets" :popup="true" :callback="closeSets"></Sets>
        </van-popup>
    
    </div>
</template>
<script>

import { Panel,Row, Col,Icon,Popup } from 'vant';

import Location from 'touch/components/home/service/location/index';
import Sets from 'touch/components/home/service/sets/index';


export default {
	components :{
		[Panel.name] : Panel,
        [Row.name] : Row,
        [Col.name] : Col,
        [Icon.name] : Icon,
        [Popup.name] : Popup,
        Location,
        Sets,
	},
	data () {
        return {
            location : false,
            sets: false,
        }
    },
    methods:{
        showLocation(){
            this.location = true
            this.$nextTick(function () {
                this.$refs.location.init();
            })
        },
        closeLocation(){
            this.location = false;
        },
        closeSets(){
            this.sets = false;
        }
    }
}
</script>
<style>
    .service .van-row{padding: 20px 0px;}
    .service .van-col{text-align: center;}
    .service .van-col span{
        display: block;
        padding: 0 5px;
        font-size: 12px;
        line-height: 14px;
    }
    .service .van-col i{font-size: 24px;}
</style>
